<template>
<transition name="bounce"
  enter-active-class="bounceInLeft"
  leave-active-class="bounceOutRight">
  <div class='backgroundWrapper'>
    <div class="backgroundTop">
        <div class="logoWrapper">
            <div class="logoImg" :style="{backgroundImage:`url(${imageUrl})`}" @click="handleGoHome()">
            </div>
            <div class="logoText">中国联通API商城</div>
        </div>
        <div class="backgroundRight">
            <div class="nickname">spirits</div>
            <div class="quitWrapper" @click="handleQuit()">退出</div>
        </div>
    </div>
    <div class="menuWrapper" ref="menuContent">
        <div class="leftWrapper" :style="{height: leftHeight}">
            <el-row class="tac">
              <el-col :span="24">
                  <el-menu
                  default-active="1"
                  class="el-menu-vertical-demo"
                  @select="handleSelect"
                  background-color="#545c64"
                  text-color="#fff"
                  active-text-color="#ffd04b">
                  <el-submenu index="1">
                      <template slot="title">
                      <i class="el-icon-menu"></i>
                      <span>我是接口使用者</span>
                      </template>
                      <el-menu-item index="1">选项1</el-menu-item>
                      <el-menu-item index="2">选项2</el-menu-item>
                      <el-menu-item index="3">选项3</el-menu-item>
                      <el-menu-item index="4">选项4</el-menu-item>
                  </el-submenu>
                  <el-submenu index="2">
                      <template slot="title">
                      <i class="el-icon-location"></i>
                      <span>我是接口提供者</span>
                      </template>
                      <el-menu-item index="2-1">选项1</el-menu-item>
                      <el-menu-item index="2-2">选项2</el-menu-item>
                      <el-menu-item index="2-3">选项3</el-menu-item>
                      <el-menu-item index="2-4">选项4</el-menu-item>
                  </el-submenu>
                  <el-submenu index="3">
                      <template slot="title">
                      <i class="el-icon-document"></i>
                      <span>个人中心</span>
                      </template>
                      <el-menu-item index="3-1">个人信息修改</el-menu-item>
                  </el-submenu>
                  </el-menu>
              </el-col>
          </el-row>
        </div>
        <div class="contentWrapper">
          <div class="topWrapper">
              <el-tabs v-model="editableTabsValue" type="card" editable @edit="handleTabsEdit">
                <el-tab-pane
                  :key="item.name"
                  v-for="item in editableTabs"
                  :label="item.title"
                  :name="item.name">
                  <div class="caseWrapper">
                    <div class="caseJustWrapper" v-if="item.name === '1'">
                      一好不好
                    </div>
                    <div class="caseJustWrapper" v-else-if="item.name === '2'">
                      二好不好
                    </div>
                    <div class="caseJustWrapper" v-else-if="item.name === '3'">
                      <Footer></Footer>
                    </div>
                  </div>
                </el-tab-pane>
              </el-tabs>
          </div>
        </div>
    </div>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%">
      <span>你确定退出个人主页吗</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleGoHome">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</transition>
</template>

<script>
import logoImage from '@/assets/logo.jpg'
import SecondTop from '@/components/top/secondtop.vue'
import Footer from '@/components/footer/footer.vue'
export default {
  name: 'Background',
  data () {
    return {
      dialogVisible: false,
      leftHeight: '',
      menuHeight: '',
      imageUrl: logoImage,
      firstName: 'produce',
      activeName: '1',
      menuList: [
        {
          name: '1',
          title: '关于我们',
          children: [
            {
              name: 'produce',
              title: '公司介绍'
            },
            {
              name: 'pingtai',
              title: '我们的平台'
            },
            {
              name: 'excellent',
              title: '我们的优势'
            },
            {
              name: 'do',
              title: '我们的使命'
            }
          ]
        },
        {
          name: '2',
          title: '服务商相关',
          children: [
            {
              name: 'produce',
              title: '公司介绍'
            },
            {
              name: 'pingtai',
              title: '我们的平台'
            },
            {
              name: 'excellent',
              title: '我们的优势'
            },
            {
              name: 'do',
              title: '我们的使命'
            }
          ]
        }
      ],
      // tab
      editableTabsValue: '1',
      editableTabs: [],
      tabIndex: 2,
      tempName: ''
    }
  },
  mounted () {
    this.leftHeight = window.innerHeight - 46 + 'px'
  },
  components: {
    Footer,
    SecondTop
  },
  created () {
    if (this.$cookieStore.getCookie('userToken') === '') {
      this.$router.push('/login')
      return
    }
    document.title = '个人中心-API商城'
    this.editableTabs.push({title: '选项1', name: '1'})
  },
  methods: {
    handleGoHome () {
      this.$router.push('/home')
    },
    handleQuit () {
      this.dialogVisible = true
    },
    handleMenu (name) {
      this.firstName = name
    },
    handleSelect (key, keyPath) {
      const abc = {
        title: '选项' + key,
        name: key
      }
      const ids = this.editableTabs.findIndex(o => o.name === key)
      if (ids === -1) {
        this.editableTabs = this.editableTabs.concat(abc)
      }
      this.editableTabsValue = key
    },
    handleTabsEdit (targetName, action) {
      // if (action === 'add') {
      //   let newTabName = ++this.tabIndex + ''
      //   this.editableTabs.push({
      //     title: 'New Tab',
      //     name: newTabName,
      //     content: 'New Tab content'
      //   })
      //   this.editableTabsValue = newTabName
      // }
      if (action === 'remove') {
        let tabs = this.editableTabs
        let activeName = this.editableTabsValue
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              let nextTab = tabs[index + 1] || tabs[index - 1]
              if (nextTab) {
                activeName = nextTab.name
              }
            }
          })
        }
        this.editableTabsValue = activeName
        this.editableTabs = tabs.filter(tab => tab.name !== targetName)
      }
    }
  }
}
</script>

<style lang='stylus' scoped>
@import '~@/assets/css/variable.styl';
.backgroundWrapper {
    background-color white
    width 100%
    .backgroundTop {
        background-color #00192F
        display flex
        justify-content space-between
        .logoWrapper {
            margin-bottom 8px
            padding-left 20px
            border-right-style solid
            padding-right 28px
            border-width: 1px
            border-color: #E4E4E4
            margin-top 9px
            display flex
            background-color #00192F
            .logoImg {
                cursor pointer
                width 50px
                height 30px
                background-repeat: no-repeat;
                background-size: cover;
            }
            .logoText {
                margin-left 5px
                color #fff
                font-weight bold
                font-size 20px
            }
        }
        .backgroundRight {
            display flex
            line-height 46px
            color #fff
            font-size 14px
            .nickname {
                border-left-style solid
                border-right-style solid
                padding-left 25px
                padding-right 25px
                border-width: 1px
                border-color: #E4E4E4
            }
            .quitWrapper {
                cursor pointer
                margin-left 30px
                margin-right 30px
            }
        }
    }
    .menuWrapper {
      display flex
      .leftWrapper {
        width 300px
        background-color #545C64
      }
      .contentWrapper {
        width 100%
        .topWrapper {
          border-bottom-style solid
          border-width: 1px
          border-color: #fff
          min-height 500px
          .caseWrapper {
            padding 0px 10px
            caseJustWrapper {
            }
          }
        }
      }
    }
}
</style>

<style>
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }
  body > .el-container {
    margin-bottom: 40px;
  }
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
  .topWrapper .el-tabs__new-tab {
    display: none;
  }
</style>
